<template>
  <el-descriptions
    :title="title"
    class="margin-top"
    :column="column"
    :size="size"
    :direction="direction"
    :border="border"
  >
    <template #title>
      <slot name="title"></slot>
    </template>
    <template #extra>
      <slot name="extra"></slot>
    </template>

    <el-descriptions-item
      v-for="(item, index) in fieldListWithoutCondition"
      :label="item.label"
      key="index"
    >
      <!-- 短文本 -->
      <template #default v-if="item.type == 'TEXT'">
        {{ data[item.name] }}
      </template>
      <template #default v-if="item.type == 'REDUCE'">
        <!-- {{   data[item.paramOne] -  data[item.paramTwo]}} -->
        {{ useCheck().num_subtract( data[item.paramOne],data[item.paramTwo]).toFixed(2) }}
      </template>
      <template #default v-if="item.type == 'TEXTJUDGE'">
        {{ data[item.name] }}
      </template>
      <template #default v-else-if="item.type == 'TEXTMI'">
        {{ data[item.name] }}米
      </template>
      <template #default v-if="item.type == 'TIME'">
        {{ useConvert().toDatetimeAll(data[item.name]) }}
      </template>
      <!-- 长文本 -->
      <template
        #default
        v-else-if="item.type == 'LONGTEXT'"
        style="width: 100%"
      >
        {{ data[item.name] }}
      </template>

      <!-- 文件 -->
      <template #default v-else-if="item.type == 'FILE'">
        <FileButton
          type="SHOW"
          v-model:data-list="data[item.name]"
        ></FileButton>
      </template>

      <!-- 时间 -->
      <template #default v-else-if="item.type == 'DATETIME'">
        {{ toDatetime(data[item.name]) }}
      </template>

      <!-- 图片或者视频 -->
      <template #default v-else-if="item.type == 'IMAGE'">
        <!-- <el-image style="width: 50px; height: 50px" :src="toUrl(data[item.name])"
                    :preview-src-list="toUrls(data[item.name])" fit="cover" :preview-teleported="true" /> -->
        <div>
          <el-image
            v-if="data[item.name].indexOf('.mp4') < 0"
            style="width: 50px; height: 50px"
            :src="toUrl(data[item.name])"
            fit="cover"
            :preview-src-list="toUrls(data[item.name])"
            :preview-teleported="true"
          >
            <span>图片</span>
          </el-image>

          <video
            v-if="data[item.name].indexOf('.mp4') >= 0"
            style="width: 50px; height: 50px"
            :src="toUrl(data[item.name])"
            :preview-src-list="toUrls(data[item.name])"
            @click="clickVideo(data[item.name])"
          ></video>
        </div>
      </template>
      <template #default v-else-if="item.type == 'LONGIMAGE'">
        <div class="d-flex flex-wrap ">
       <div v-for="item in toUrls(data[item.name])"  class="m-2">
           <div v-if="item">
            <el-image
            v-if="item.indexOf('.mp4') < 0"
            style="width: 50px; height: 50px"
            :src="item"
            fit="cover"
            @click="clickVideos(item,'image')"

            :preview-src-list="item"
            :preview-teleported="true"
          >
          </el-image>

          <video
            v-if="item.indexOf('.mp4') >= 0"
            style="width: 50px; height: 50px"
            :src="item"
            :preview-src-list="item"
            @click="clickVideos(item,'video')"
          ></video>
           </div>
        </div>
    </div>
      </template>
      <!-- 插槽 -->
      <template #default v-else-if="item.type == 'SLOT'">
        <!-- 此处作用域插槽理论上用不到，放在此处备用 -->
        <slot :name="item.name" :data="data"></slot>
      </template>
    </el-descriptions-item>
    <!-- <el-descriptions-item label="Address" label-align="right" align="center"
      >No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu
      Province</el-descriptions-item -->
    >
  </el-descriptions>

  <slot name="button" :descriptionData="data"> </slot>
  <!-- /**
  视频弹窗
  */ -->
  <el-dialog v-model="videoDialogVisible" title="视频详情" width="600" :append-to-body="true" style="border-radius: 10px"  center destroy-on-close>
    <div class="w-100 d-flex justify-content-center">
      <iframe width="500"    height="500" :src="currentVideoSrc"></iframe>

    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="videoDialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
  <el-dialog v-model="imageDialogVisible" title="图片详情" width="600" :append-to-body="true" style="border-radius: 10px"  center destroy-on-close>
    <div class="w-100 d-flex justify-content-center">
      <el-image        style="width: 400px; height: 600px" :src="currentVideoSrc"></el-image>
    </div>
    <template #footer>
      <span>
        <el-button type="primary" @click="imageDialogVisible = false">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useConvert } from "@/hook/useConvert";
import FileButton from "../button/FileButton.vue";

import * as _ from "lodash";
import {
  Field,
  OperationAttribute,
  Attribute,
} from "@/components/common/horizontalMeau/AttributeInterface";
import { useCheck } from "@/hook/useCheck";

const { toDate, toDatetime, toTime, toUrls, toUrl,toSingeUrl, } = useConvert();

const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  data: {
    type: Object,
    default: () => ({}),
  },
  fieldList: {
    type: Object,
    default: () => [{}],
  },

  imageWidth: {
    type: String,
    default: "64px",
  },

  size: {
    type: String,
    default: "small",
  },

  direction: {
    type: String,
    default: "horizontal",
  },

  column: {
    type: Number,
    default: 1,
  },

  border: {
    type: Boolean,
    default: true,
  },

  align: {
    type: String,
    default: "left",
  },

  operation: {
    type: Object,
    default: () => ({}),
  },

  showButton: {
    type: Boolean,
    default: false,
  },

  inCollapse: {
    type: Boolean,
    default: false,
  },

  long: {
    type: Boolean,
    default: false,
  },
});
const fieldListWithoutCondition=ref()
onMounted(() => {
  //根据条件判断显隐
   fieldListWithoutCondition.value = props.fieldList.filter((item:any) => {
    if (props.data[item.relation]) {
    console.log(props.data[item.relation].indexOf(item.condition));
  return (props.data[item.relation].indexOf(item.condition)>-1); 
    }else{
      return true
    }
    
});
props.fieldList.value=fieldListWithoutCondition


});

/* 如果不加，出现空值时，会出现width小于100%的情况 */
let width = "100%";

/* 如果在 Collapse 中 此处 减去collapse 的下拉icon总宽度 ，element ui 默认为 font-size（13px） + margin-right（8px） */
/* 此时两个description 的宽度基本一致 */
if (props.inCollapse) {
  width = "100% - 21px";
}

watch(props.data, (el) => {
  console.log("props.data", el);
});
const currentVideoSrc = ref("")

const imageDialogVisible = ref(false);

const videoDialogVisible = ref(false);
const clickimage=(item:any)=>{
    console.log(item,'item');

}
const clickVideo = (item:string) => {
    console.log(item,'item');
    item = item.substring(2, item.length-2);
    videoDialogVisible.value = true;
    currentVideoSrc.value = toSingeUrl(item)
    console.log(currentVideoSrc.value);
    
}
const clickVideos = (item:string,type:string) => {
    console.log(item,'item');
if (type=="video") {
    videoDialogVisible.value = true;
    currentVideoSrc.value = item
    console.log(currentVideoSrc.value);
}
if (type=="image") {
    console.log('imge');
    
    imageDialogVisible.value = true;
    currentVideoSrc.value = item
    console.log(currentVideoSrc.value);
} 
    
}
</script>

<style scoped>
.margin-top {
  width: calc(v-bind("width"));
}
</style>
